<template>
  <div id="order_container">
    <header-nav headTitle="Order" go-back="true"></header-nav>
    <section class="thank_cnt" v-if="orderData">
      <h3 class="thanks_title">Order is successful</h3>
      <p>Your order Number: <span class="orange">{{orderData.order_id}}</span></p>
      <p>Order time: {{orderData.order_time}}</p>
      <p>Price: <span class="orange">￥{{orderData.total}}</span></p>
      <p>Payment: Cash on delivery</p>
    </section>
    <p class="fail" v-else>Order is fail</p>
    <router-link to="/home" class="close_btn">Close</router-link>
    <footer-nav></footer-nav>
    <transition name="router-fade" mode="out-in">
      <router-view ></router-view>
    </transition>
  </div>
</template>

<script>
  import HeaderNav from '../../components/HeaderNav.vue'
  import FooterNav from '../../components/FooterNav.vue'
  import { getOrder } from '../../service/getData'
  import { getStore } from '../../config/mUtils'
  export default {
    data() {
      return {
      	orderData: null
      }
    },
    components: {
      HeaderNav,
      FooterNav
    },
    created() {
    	this.initData()
    },
    methods: {
    	async initData() {
    		let order_id = this.$route.query.order_id
        let user_id = Number(getStore('user_id'))
    		await getOrder(order_id, user_id).then(res => {
    			this.orderData = res.data
          console.log(this.orderData)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../style/mixin';
  #order_container {
    padding-top: 1.9rem;
    position: relative;
  }
  .thank_cnt {
    background-color: #fff;
    padding: 0.6rem 5%;
    margin: 0.3rem auto;
    .thanks_title {
      text-align: center;
      text-transform: uppercase;
      color: #7ec801;
      padding: 0.2rem 0;
    }
    p {
      font-size: 0.65rem;
      padding: 0.2rem 0;
    }
    .orange {
      color: #f9b233;
    }
  }
  .fail {
    background-color: #fff;
    text-align: center;
    text-transform: uppercase;
    color: #cc0000;
    padding: 0.4rem 0;
  }
  .close_btn {
    display: block;
    width: 100%;
    background-color: #999;
    text-transform: uppercase;
    color: #fff;
    height: 1.62962rem;
    line-height: 1.62962rem;
    font-size: 0.63703rem;
    text-align: center;
    margin-top: 0.66667rem;
    font-family: Helvetica, arial;
    border-radius: 10px;
  }
</style>
